<template>
  <div
  class="flex h-screen p-5 overflow-hidden bg-center bg-cover"
      v-if="data"
  >



    <!-- 左 -->
    <div class="flex flex-col flex-1 mr-5 borRiu">
      <div class="h-2/3 borRiu" style="background-color: red;">直播画面</div>
      <div class="h-1/3 borRiu" style="background-color: #000;margin-top: 20px;">实时评论</div>
    </div>





    <!-- 中 -->
    <div class="flex flex-col w-1/2 mr-5">
      <!-- 数据总览 -->
      <TotalData class="p-3 bg-opacity-50 bg-slate-800 borRiu" :data="data.totalData"></TotalData>
      <div>2</div>
      <div>3</div>
    </div>





    <!-- 右 -->
    <div class="flex flex-col flex-1 p-3 bg-opacity-50 bg-slate-800 borRiu" >
      业绩排名
    </div>




  </div>
</template>

<script setup>
import TotalData from "./components/TotalData.vue";

import {getVisualization} from "./api/visualization";
import {ref} from "vue";

const data = ref();

// const loadData = async () => {
//   data.value = await getVisualization();
// };

// 间隔三秒 动态获取数据
// setInterval(() => {
//   loadData();
// }, 1000);

</script>

<style lang="scss" scoped>
* {
  color: white;
}
.borRiu{
  border-radius: 10px;
}
</style>
